<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>第一种头部</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <style>
        html,
        body {
            width: 100%;
            min-height: 100%;
            background: #f7f7f7;
            line-height: 1;
        }


        /*搜索框*/
        .search_box{
          background-color: #fff;
          padding: 0.2rem 0.75rem;
          padding-top: calc(25px + 0.3rem);
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .search{
          flex: 1;
          background-color: #f3efee;
          display: flex;
          align-items: center;
          padding: 0.4rem 0.2rem;
          margin-right: 0.2rem;
        }

        .search img{
          width: 1rem;
          margin-right: 0.2rem;
        }
        .search input{
          line-height: 1rem;
          height: 1rem;
        }
        .cancel_btn{
          font-size: 0.8rem;
          color: #333;
        }

        /*搜索提示*/
        .aui-tab-item.aui-active{
          border-bottom:none;
        }
        .aui-tab-item a{
          color:#666;
          font-size:0.7rem;
          font-weight: 600;
        }
        .aui-tab-item.aui-active a{
          color:#f23030;
          border-bottom: 2px solid #f23030;
        }
        .search_sec2{
          margin-top: 0.5rem;
          background: #fff;
          padding: 0.75rem;
        }
        .search_sec2_title{
          font-size: 0.8rem;
          font-weight: bold;
          color: #333;
        }
        /*.search_sec2_txt a{
          display: block;
          width: 100%;
          background: #eee;
          height: 1.5rem;
          line-height: 1.5rem;
          font-size: 0.7rem;
          color: #333;
        }
        .search_sec2_txt .search_sec2_txt_grid .search_sec2_txt_col{
          padding:0 0.5rem;
          margin-top:1rem;
        }
        .search_sec2_txt .search_sec2_txt_grid .aui-row{
          margin:0 -0.5rem;
        }*/
        .search_sec3{
          background: #fff;
          padding: 0.75rem;
        }
        .search_sec3_title{
          font-size: 0.8rem;
          font-weight: bold;
          color: #333;
          position: relative;
          line-height: 2rem;
          border-bottom: 1px solid #eee;
        }
        .search_sec3_title img{
          position: absolute;
          top:0.55rem;
          right:0;
        }
        .search_sec3_txt ul li{
          line-height: 2rem;
          border-bottom: 1px solid #eee;
          font-size:0.7rem;
        }
        .search_sec2_txt ul{
          margin:0.5rem 0 0;
        }
        .search_sec2_txt ul li{
          float:left;
          padding:0.3rem 0.7rem;
          background:#eee;
          text-align: center;
          margin-right:0.7rem;
          margin-bottom: 0.7rem;
        }
        .search_sec2_txt ul li a{
          color:#333;
          font-size:0.7rem;

        }





    </style>
</head>

<body>
  <div id="app">
    <div class="search_box">
      <div class="search">
        <img src="../../image/four/search.png" alt="" @click="open_shopSearch_win($('#keyword').val())">
        <input type="text" name="" value="" placeholder="请输入您要搜索的商品" id="keyword">
      </div>
      <div class="cancel_btn" onclick="close_win()">取消</div>
    </div>
    <div class="search_content">
      <div class="search_sec1">
        <div class="aui-tab" id="tab">
            <div class="aui-tab-item aui-active"><a href="javascript:void(0);">商品</a></div>
            <div class="aui-tab-item"><a href="javascript:void(0);">源头产品</a></div>
            <div class="aui-tab-item"><a href="javascript:void(0);">本地服务</a></div>
        </div>
      </div>
      <div class="search_sec2">
        <div class="search_sec2_title">热门搜索</div>
        <div class="search_sec2_txt" v-if="hot && hot.length>0">
          <ul  class="clearfix">
            <li v-for="item1 in hot" @click="open_shopSearch_win(item1.content)"><a href="javascript:void(0);">{{item1.content}}</a></li>
            <!-- <li v-for="item1 in hot"><a href="javascript:void(0);">芝士蛋糕</a></li> -->
          </ul>
        </div>
      </div>
      <div class="search_sec3">
        <div class="search_sec3_title">搜索历史 <img src="../../image/my/delete.png" alt="" width="15" @click="hostoryClear()"></div>
        <div class="search_sec3_txt" v-if="history && history.length>0">
           <ul>
             <li v-for="item2 in history">{{item2.content}}</li>
           </ul>
        </div>
      </div>
    </div>
  </div>

</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript">
    var app;
    apiready = function() {
      // alert(api.pageParam.store_id);
      app = new Vue({
          el: '#app',
          data: {
            type1:1,
            is_local1:'',
            hot:[],
            history:[],
            flag:1

          },
          created: function() {
              var $_this = this;
              api.ajax({
                  url: window.Url.Freesearch_searchList,
                  method: 'post',
                  data: {
                      values: {
                        token:'',
                        type:$_this.type1,
                        is_local:$_this.is_local1
                      }
                  }
              }, function(ret, err) {
                  if (ret) {
                      // console.log(JSON.stringify(ret.data))

                      if (ret.re == 1) {
                          $_this.hot=ret.data.hot;
                          $_this.history=ret.data.history;
                          console.log(JSON.stringify($_this.hot));


                          $_this.$nextTick(function() {

                          })
                      }

                  } else {
                      api.alert({
                          msg: JSON.stringify(err)
                      });
                  }
              })
          },
          mounted: function() {
              var $_this = this;
              navTab1();
              $_this.enterKey();

          },
          methods: {
            setType:function(type,isLocal){
              var $_this=this;
              $_this.type1=type;
              $_this.is_local1=isLocal;
              $_this.getHotSearch();
            },
            getHotSearch(){
              var $_this=this;
              api.ajax({
                  url: window.Url.Freesearch_searchList,
                  method: 'post',
                  data: {
                      values: {
                        token:'',
                        type:$_this.type1,
                        is_local:$_this.is_local1
                      }
                  }
              }, function(ret, err) {
                  if (ret) {
                      // console.log(JSON.stringify(ret.data))

                      if (ret.re == 1) {
                          $_this.hot=ret.data.hot;
                          $_this.history=ret.data.history;
                          // console.log(JSON.stringify($_this.hot));


                          $_this.$nextTick(function() {

                          })
                      }

                  } else {
                      api.alert({
                          msg: JSON.stringify(err)
                      });
                  }
              })

            },
            hostoryClear:function(){
              var $_this=this;
              api.ajax({
                  url: window.Url.Freesearch_emptySearch,
                  method: 'post',
                  data: {
                      values: {
                        token:'',
                        type:$_this.type1,
                        is_local:$_this.is_local1
                      }
                  }
              }, function(ret, err) {
                  if (ret) {
                      // console.log(JSON.stringify(ret.data))
                      api.toast({
                          msg: ret.info,
                          duration: 2000,
                          location: 'bottom'
                      });

                  } else {
                      api.alert({
                          msg: JSON.stringify(err)
                      });
                  }
              })
            },
            enterKey:function(){
              $_this=this;
              $("#keyword").on('keypress', function(e) {    //#keyword为input文本框
              	var keycode = e.keyCode;
              	var searchName = $(this).val();
              	if(keycode == '13') {
              		$_this.open_shopSearch_win($("#keyword").val());
              	}
              });
            },
            open_shopSearch_win:function(keywords){
              var $_this=this;
              api.openWin({
                  name: 'search_shop_result',
                  url: './search_shop_result.html',
                  pageParam: {
                      keywords: keywords,
                      type:api.pageParam.searchType,
                      flag:$_this.flag,
                      store_id:api.pageParam.store_id,
                  }
              });
            }


          }
      })
    };


    // 关闭当前窗口
    function close_win(){
      api.closeWin({});
    }

    function navTab1(){
      var tab = new auiTab({
          element:document.getElementById("tab"),
          index:1,
          repeatClick:false
      },function(ret){
        if (ret.index == 1) {
           app.flag=1;
            //  app.flag1=true;
            //  app.flag2=false;
            //  app.flag3=false;
            //  alert(app.flag1);

            setTimeout(function() {
                app.setType(1, '');
            }, 100)

        } else if (ret.index == 2) {
          app.flag=2;
          // app.flag1=false;
          // app.flag2=true;
          // app.flag3=false;
          // alert(app.flag2);

            setTimeout(function() {
                app.setType(2, 0);
            }, 100)


        } else if (ret.index == 3) {
          app.flag=3;
          // app.flag1=false;
          // app.flag2=false;
          // app.flag3=true;
          // alert(app.flag3);

            setTimeout(function() {
                app.setType(2, 1);
            }, 100)

        }
      });
    }

    // 打开搜索窗口
    // function open_shopSearch_win(flag1,flag2,flag3) {
    //     api.openWin({
    //         name: 'search_shop_result',
    //         url: './search_shop_result.html',
    //         pageParam: {
    //             keywords: $("#keyword").val(),
    //             type:1,
    //             flag1:flag1,
    //             flag2:flag2,
    //             flag3:flag3,
    //         }
    //     });
    //
    // }

</script>

</html>
